<template>
  <div>
    <x-header id="header" :left-options="{showBack: false}">登录</x-header>
    <div class="main-header">
      <div v-if="registrationStep === 1">
        <tab active-color custom-bar-width="60px" >
          <tab-item selected @on-item-click="clickTab">用户登录</tab-item>
          <tab-item @on-item-click="clickTab">手机注册</tab-item>
        </tab>
        <transition name="fade" mode="out-in">
          <div v-if="current === 0" key="login">
            <div class="weui-cells_form" >
              <group gutter="1rem">
                <x-input placeholder="请输入手机号码" class="input"  mask="99999999999" is-type="china-mobile"  :max="11" v-model="account">
                  <img slot="label" style="padding-right:10px;display:block;" src="../../../static/img/mobile.png" width="24" height="24">
                </x-input>
                <x-input placeholder="请输入密码" :show-clear="false" class="input" type="password" v-model="password">
                  <img slot="label" style="padding-right:10px;display:block;" src="../../../static/img/password2.png" width="24" height="24">
                  <x-button class="verification" plain slot="right" type="primary" mini link="resetPwd" >忘记密码</x-button>
                </x-input>
              </group>
            </div>
            <div class="save">
              <x-button class="save-button" @click.native="loginHandle">登录</x-button>
            </div>
          </div>
          <div v-else key="register">
            <div class="weui-cells_form">
              <group >
                <x-input placeholder="请输入手机号码" class="input"  mask="99999999999" is-type="china-mobile"  :max="11" v-model="mobile">
                  <div class="input-label" slot="label">手机号码</div>
                </x-input>
                <x-input placeholder="请输入验证码" :show-clear="false" class="input" title="验证码" mask="999999"  :max="6" v-model="VCCode">
                  <div class="input-label" slot="label">验证码</div>
                  <x-button class="verification" plain slot="right" type="primary" mini @click.native="receiveVerificationCode">{{VCText}}</x-button>
                </x-input>
                <x-input placeholder="请输入登录密码" class="input" title="登录密码" type="password" v-model="pwd1"  >
                  <div class="input-label" slot="label">登录密码</div>
                </x-input>
                <x-input placeholder="请输入重复密码" class="input" title="重复密码" type="password" v-model="pwd2">
                  <div class="input-label" slot="label">重复密码</div>
                </x-input>
              </group>
            </div>
            <div class="save">
              <x-button class="save-button" @click.native="nextStep">注册</x-button>
            </div>
          </div>
        </transition>
      </div>
      <div v-else-if="registrationStep === 2">
        <div class="name">
          <x-input title="姓名" placeholder="请输入姓名" v-model="nickname" />
        </div>
        <div class="check">
          <group class="group" title="渠道来源">
            <cell class="cell" v-for="(item,index) in channelList" :key="index" :title="item.title"  >
              <img slot="icon" width="25" class="cell-icon" :src="item.choose === 1?'../../../static/img/on.png':'../../../static/img/off.png'" @click="choose(index)" />
            </cell>
          </group>
        </div>
        <div class="save">
          <x-button class="save-button" @click.native="registerHandle">登录</x-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sendSms, register, login  } from '@/api/user'
import { isPhoneNumber } from '@/libs/util'
import { cookie } from 'vux'

export default {
  name: 'registrationLogin',
  data () {
    return {
      current:0,
      registrationStep: 1,
      channelList: [
        {
          id:0,
          title: '寿险渠道',
          choose: 1
        },
        {
          id:1,
          title: '同行渠道',
          choose: 0
        },
        {
          id:2,
          title: '入围公司',
          choose: 0
        },
        {
          id:3,
          title: '其他渠道',
          choose: 0
        },
      ],
      account: '',
      password: '',
      mobile: '',
      VCText: '获取验证码',
      VCCode:'',
      pwd1:'',
      pwd2:'',
      timer: null,
      nickname: '',
      leaderId: this.$route.query.id || ''
    }
  },
  methods: {
    clickTab (index) {
      this.current =  parseInt(index)
    },
    choose(index) {
      let _index = parseInt(index)
      if (_index !== this.current) {
        this.current = _index
        this.channelList = this.channelList.map( (item, itemIndex) => {
          if (_index === itemIndex) {
            item.choose = 1
          } else {
            item.choose = 0
          }
          return item
        })
      }
    },
    nextStep() {
      if(!isPhoneNumber(this.mobile)) {
        this.$vux.toast.show({
          text: '手机号有误',
          type: 'cancel'
        })
        return
      } else if (!this.VCCode) {
        this.$vux.toast.show({
          text: '请输入验证码',
          type: 'cancel'
        })
        return
      } else if (this.pwd1.length < 6) {
        this.$vux.toast.show({
          text: '密码密码过短',
          type: 'cancel'
        })
        return
      } else if (this.pwd1 !== this.pwd2) {
        this.$vux.toast.show({
          text: '密码不一致',
          type: 'cancel'
        })
        return
      } else {
        this.registrationStep = 2
      }
    },
    receiveVerificationCode() {
      if (this.VCText instanceof Number) {
        this.$vux.toast.show({
          text: '请稍后点击'
        })
      } else {
        if(!isPhoneNumber(this.mobile)) {
          this.$vux.toast.show({
            text: '手机号有误',
            type: 'cancel'
          })
          return
        } else {
          sendSms(parseInt(this.mobile)).then(() => {
            this.$vux.toast.show({
              text: '验证码已发送',
              type: 'success'
            })
            this.VCText = 60
            this.timer = setInterval(
              () => {
                if (this.VCText > 0) {
                  this.VCText--
                } else {
                  this.VCText = '获取验证码'
                  clearInterval(this.timer)
                }
              },
              1000)
          })
        }
      }
    },
    registerHandle() {
      if (!this.nickname) {
        this.$vux.toast.show({
          text: '请输入姓名',
          type: 'cancel'
        })
        return
      } else {
        register({
          mobile: this.mobile,
          password: this.pwd1,
          name: this.nickname,
          channelSrc: this.current,
          code: this.VCCode,
          leaderId: this.leaderId
        }).then( data => {
          this.loginHandle({mobile:this.mobile,pwd:this.pwd1})
        })
      }
    },
    loginHandle({mobile, pwd}) {
      login({mobile: mobile || this.account, password: pwd || this.password}).then( data => {
        cookie.set('token', data.token, {
          expires: 1
        })
        cookie.set('userInfo', JSON.stringify(data.userInfo), {
          expires: 1
        })
        this.globalData.cid = data.userInfo.id
        this.globalData.mobile = data.userInfo.mobile
        this.$router.push({ name:'home'})
      })
    }
  },
  mounted() {
    clearInterval(this.timer)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
.verification {
  font-size: 14px;
  color: #4A90E2;
  border: none;
  padding: 0;
}
.name {
  background: #fff;
}
.check {
  margin-top: 1rem;
  overflow: auto;
  color: #4A4A4A;
  background: #fff;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s ease;
}
.fade-enter, .fade-leave-to
  /* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
</style>
